<template>
  <el-card class="mt-10">
    <el-button
      icon="el-icon-plus"
      type="primary"
      size="small"
      @click="showAddSpu"
      >添加SPU</el-button
    >
    <el-table :data="spuList" border class="mt-10">
      <el-table-column type="index" label="序号" align="center" width="80" />
      <el-table-column label="SPU名称" align="center" prop="spuName" />
      <el-table-column label="SPU描述" align="center" prop="description" />
      <el-table-column label="操作" align="center">
        <el-button type="primary" icon="el-icon-plus" size="small" />
        <el-button type="warning" icon="el-icon-edit-outline" size="small" />
        <el-button type="info" icon="el-icon-link" size="small" />
        <el-button type="danger" icon="el-icon-delete" size="small" />
      </el-table-column>
    </el-table>
    <div class="mt-20">
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :page-sizes="[4, 8, 12]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import { GetSpuPageInfo } from '@/api/product/spu'
export default {
  name: 'SpuList',
  data() {
    return {
      page: 1,
      limit: 4,
      spuList: [],
      total: 0
    }
  },
  computed: {
    ...mapState({
      category3Id: (state) => state.category.category3Id
    })
  },
  watch: {
    category3Id(newValue, oldValue) {
      this.getSpuList()
    }
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val
      this.getSpuList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getSpuList()
    },
    // 获取页面
    async getSpuList() {
      const result = await GetSpuPageInfo(
        this.page,
        this.limit,
        this.category3Id
      )
      console.log(result)
      this.spuList = result.data.records
      this.total = result.data.total
    },
    // 跳转添加页面
    showAddSpu() {
      this.$emit('showSpuList', 2)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
